<template>
  <div>
    <!-- 顶部面包屑 -->
    <el-row>
      <el-col :span="16">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>高效办公</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 用户头像 -->
        <div class="demo-image__preview" style="margin-top:24px">
          <el-image
            style="width: 50px; height: 50px ; border-radius:25px"
            :src="url"
            :preview-src-list="srcList"
          >
            <img :src="url" alt="用户头像" />
          </el-image>
          <span>小明 | 前端工程师</span>
        </div>
        <el-divider></el-divider>
        <!-- 智能内外勤 -->
        <div class="my-fieldwork">
          <div class="my-fieldwork-title">智能内外勤</div>
          <div class="my-fieldwork-item">
            <router-link to="/about/page3">
              <div>
                <span class="iconfont my-icon icon-qingjia1"></span>
                <span>请假</span>
              </div>
            </router-link>
            <router-link to="/about/page2">
              <div>
                <span class="iconfont my-icon icon-chucha"></span>
                <span>出差</span>
              </div>
            </router-link>
            <router-link to="/about/page1">
              <div>
                <span class="iconfont my-icon icon-jiaban"></span>
                <span>加班</span>
              </div>
            </router-link>
          </div>
        </div>
        <!-- 工作汇报 -->
        >
        <div class="my-fieldwork">
          <div class="my-fieldwork-title">工作汇报</div>
          <div class="my-fieldwork-item">
            <router-link to="/about/Daily">
              <div>
                <span class="iconfont my-icon icon-ico_ribao"></span>
                <span>日报</span>
              </div>
            </router-link>
            <router-link to="/about/Weekly">
              <div>
                <span class="iconfont my-icon icon-zhoubao"></span>
                <span>周报</span>
              </div>
            </router-link>
            <router-link to="/about/MonthlyReport">
              <div>
                <span class="iconfont my-icon icon-yuebao"></span>
                <span>月报</span>
              </div>
            </router-link>
          </div>
        </div>
      </el-col>
      <!-- 日历1 -->
      <el-col :span="8">
        <div>
          <el-calendar class="my-calender" v-model="value"></el-calendar>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16">
        <div>
          <!-- 客户管理 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">客户管理</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/firstPage">
                <div>
                  <span class="iconfont my-icon icon-kehu1"></span>
                  <span>校招企业客户</span>
                </div>
              </router-link>
              <router-link to="/aboout/secondPage">
                <div>
                  <span class="iconfont my-icon icon-kehu"></span>
                  <span>外部投资客户</span>
                </div>
              </router-link>
              <div></div>
            </div>
          </div>
          <!-- 财务管理 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">财务管理</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/reimbursement">
                <div>
                  <span class="iconfont my-icon icon-icon-test2"></span>
                  <span>费用报销</span>
                </div>
              </router-link>
              <router-link to="/about/expenses">
                <div>
                  <span class="iconfont my-icon icon-feiyongshenqing"></span>
                  <span>费用申请</span>
                </div>
              </router-link>
              <router-link to="/about/payment">
                <div>
                  <span class="iconfont my-icon icon-fukuanshenqing"></span>
                  <span>付款申请</span>
                </div>
              </router-link>
              <router-link to="/about/reserve">
                <div>
                  <span class="iconfont my-icon icon-tubiaozhizuomoban"></span>
                  <span>备用金申请</span>
                </div>
              </router-link>
              <div></div>
              <div></div>
            </div>
          </div>
          <!-- 行政管理 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">行政管理</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/logistics">
                <div>
                  <span class="iconfont my-icon icon-houqinguanli-01"></span>
                  <span>后勤管理</span>
                </div>
              </router-link>
              <router-link to="/about/things">
                <div>
                  <span class="iconfont my-icon icon-wupinlingyong"></span>
                  <span>物品领用</span>
                </div>
              </router-link>
              <router-link to="/about/cars">
                <div>
                  <span class="iconfont my-icon icon-yongcheshenqing"></span>
                  <span>用车申请</span>
                </div>
              </router-link>
              <router-link to="/about/seal">
                <div>
                  <span class="iconfont my-icon icon-yongzhangshenqing1"></span>
                  <span>用章申请</span>
                </div>
              </router-link>
              <router-link to="/about/shop">
                <div>
                  <span class="iconfont my-icon icon-caigoushenqing"></span>
                  <span>采购</span>
                </div>
              </router-link>
              <div></div>
            </div>
          </div>
          <!-- 人员管理 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">人员管理</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/staffManagement">
                <div>
                  <span class="iconfont my-icon icon-yuangongguanli"></span>
                  <span>员工管理</span>
                </div>
              </router-link>
              <router-link to="/about/studentManagement">
                <div>
                  <span class="iconfont my-icon icon-xuesheng1"></span>
                  <span>学生管理</span>
                </div>
              </router-link>
              <div></div>
            </div>
          </div>
          <!-- 高校办公 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">高校办公</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/approve/">
                <div>
                  <span class="iconfont my-icon icon-shenpi"></span>
                  <span>审批</span>
                </div>
              </router-link>
              <router-link to="/about/meets">
                <div>
                  <span class="iconfont my-icon icon-dianhuahuiyi1"></span>
                  <span>电话会议</span>
                </div>
              </router-link>
              <router-link to="/about/meets">
                <div>
                  <span class="iconfont my-icon icon-shipinhuiyi"></span>
                  <span>视屏会议</span>
                </div>
              </router-link>
              <router-link to="/about/office">
                <div>
                  <span class="iconfont my-icon icon-baobiao1"></span>
                  <span>智能报表</span>
                </div>
              </router-link>
              <div></div>
              <div></div>
            </div>
          </div>
          <!-- 部门管理 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">部门管理</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/eduzhengjiao">
                <div>
                  <span class="iconfont my-icon icon-drxx27"></span>
                  <span>政教处</span>
                </div>
              </router-link>
              <router-link to="/about/education">
                <div>
                  <span class="iconfont my-icon icon-bumenguanli"></span>
                  <span>总务处</span>
                </div>
              </router-link>
              <router-link to="/about/educaiwu">
                <div>
                  <span class="iconfont my-icon icon-caiwu1"></span>
                  <span>财务部</span>
                </div>
              </router-link>
              <router-link to="/about/eduhouqingchu">
                <div>
                  <span class="iconfont my-icon icon-houqinguanli-01"></span>
                  <span>后勤处</span>
                </div>
              </router-link>
              <router-link to="/about/edudangan">
                <div>
                  <span class="iconfont my-icon icon-bumendangan"></span>
                  <span>档案室</span>
                </div>
              </router-link>
              <router-link to="/about/eduxueshenghui">
                <div>
                  <span class="iconfont my-icon icon-xueshengshouce"></span>
                  <span>学生会</span>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 学籍成绩 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">学籍成绩</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/myScore">
                <div class="my-item-grid">
                  <span class="iconfont my-icon icon-xuesheng1"></span>
                  <span>学生学籍</span>
                </div>
              </router-link>
              <router-link to="/about/myScore">
                <div class="my-item-grid">
                  <span class="iconfont my-icon icon-chengjichaxun"></span>
                  <span>成绩查询</span>
                </div>
              </router-link>
              <router-link to="/about/myScore">
                <div class="my-item-grid">
                  <span class="iconfont my-icon icon-tongji2"></span>
                  <span>成绩统计</span>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 系统管理 -->
          <div class="my-fieldwork">
            <div class="my-fieldwork-title">系统管理</div>
            <div class="my-fieldwork-item">
              <router-link to="/about/roleManage">
                <div>
                  <span class="iconfont my-icon icon-jiaoseguanli"></span>
                  <span>角色管理</span>
                </div>
              </router-link>
              <router-link to="/about/userManage">
                <div>
                  <span class="iconfont my-icon icon-yonghuguanli"></span>
                  <span>用户管理</span>
                </div>
              </router-link>
              <div></div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 右侧 -->

      <el-col :span="7">
        <div class="my-label">
          <div class="my-font">便捷标签</div>
          <el-divider></el-divider>
          <div class="my-label-title">
            <router-link to="/about/page3">
              <el-tag route="/about/page3" style="margin:5px">智能内外勤</el-tag>
            </router-link>
            <router-link to="/about/Daily">
              <el-tag type="success" style="margin:5px">工作汇报</el-tag>
            </router-link>
            <router-link to="/about/firstPage">
              <el-tag type="info" style="margin:5px">客户管理</el-tag>
            </router-link>
            <router-link to="/about/logistics">
              <el-tag type="warning" style="margin:5px">行政管理</el-tag>
            </router-link>
            <router-link to="/about/staffManagement">
              <el-tag type="danger" style="margin:5px">人员管理</el-tag>
            </router-link>
            <router-link to="/about/approve">
              <el-tag style="margin:5px">高校办公</el-tag>
            </router-link>
            <router-link to="/about/roleManage">
              <el-tag type="success" style="margin:5px">系统管理</el-tag>
            </router-link>
            <router-link to="/about/eduzhengjiao">
              <el-tag type="info" style="margin:5px">部门管理</el-tag>
            </router-link>
            <router-link to="/about/myScore">
              <el-tag type="warning" style="margin:5px">学籍成绩</el-tag>
            </router-link>
            <router-link to="/about/firstPage">
              <el-tag type="warning" style="margin:5px">校招企业客户</el-tag>
            </router-link>
            <router-link to="/about/MonthlyReport">
              <el-tag style="margin:5px">月报</el-tag>
            </router-link>
            <router-link to="/about/cars">
              <el-tag type="success" style="margin:5px">用车申请</el-tag>
            </router-link>
            <router-link to="/about/reimbursement">
              <el-tag type="info" style="margin:5px">费用报销</el-tag>
            </router-link>
            <router-link to="/about/meets">
              <el-tag type="warning" style="margin:5px">电话会议</el-tag>
            </router-link>
            <router-link to="/about/education">
              <el-tag type="danger" style="margin:5px">总教处</el-tag>
            </router-link>
            <router-link to="/about/myScore">
              <el-tag style="margin:5px">成绩查询</el-tag>
            </router-link>
            <router-link to="/about/userManage">
              <el-tag type="success" style="margin:5px">用户管理</el-tag>
            </router-link>
            <router-link to="/about/eduxueshenghui">
              <el-tag type="info" style="margin:5px">学生会</el-tag>
            </router-link>
          </div>
        </div>
        <!-- 请假进度条 -->
        <div class="my-label">
          <div class="my-font">审批事项进度</div>
          <el-divider></el-divider>
          <div class="my-schedule">
            <el-steps :space="200" :active="1" align-center>
              <el-step title="已提交" description="请假"></el-step>
              <el-step title="处理中"></el-step>
              <el-step title="完成"></el-step>
            </el-steps>
          </div>
        </div>
        <div class="my-label">
          <div class="my-font">学科喜爱度</div>
          <el-divider></el-divider>
          <scoreCharts></scoreCharts>
        </div>
        <!-- echarts -->
        <div class="my-label">
          <myCharts></myCharts>
        </div>
        <!-- 卡片 -->
        <div class="my-label">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="my-font">校园资讯</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div v-for="o in 6" :key="o" class="text item">{{'恭喜 XX 同学荣获第45届网络信息安全大赛1等奖 ' + o }}</div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import myCharts from "../../components/myCharts/myCharts.vue";
import scoreCharts from "../../components/scoreCharts/scoreCharts.vue";
export default {
  name: "Office",
  data() {
    return {
      value: new Date(),
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      publicPath: process.env.BASE_URL,
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  components: {
    myCharts: myCharts,
    scoreCharts: scoreCharts,
  },
};
</script>
<style   lang="less">
a {
  text-decoration: none;
  color: black;
}
.router-link-active {
  text-decoration: none;
  color: black;
}
.my-calender {
  width: 80%;
  margin: auto;
  height: 300px;
  font-size: 15px;
}
.el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  padding: 8px;
  height: 50px !important;
}
.el-calendar__header {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid #ebeef5;
}
.my-calender button {
  font-size: 16px;
  padding: 5px;
}
.my-fieldwork {
  width: 96%;
  padding: 2%;
  display: grid;
  grid-template-rows: 30px 1fr;
  box-shadow: 0 0 1px 2px gainsboro;
  margin-top: 20px;
  border-radius: 5px;
}
.my-fieldwork-title {
  line-height: 30px;
}
.my-fieldwork-item {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
}
.my-fieldwork-item div {
  border: 1px solid gainsboro;
  height: 80px;
  line-height: 80px;
}
.my-label {
  width: 96%;
  padding: 2%;
  box-shadow: 0 0 1px 1px gainsboro;
  margin-top: 20px;
  margin-left: 20px;
  border-radius: 5px;
}
.my-label-title {
  text-align: center;
}
// 卡片样式
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-card {
  border: 1px solid #ffffff;
}
.el-card.is-always-shadow {
  box-shadow: 0 2px 12px 0 rgb(255, 255, 255);
}
.my-font {
  font-size: 18px;
  font-weight: 800;
}
.my-icon {
  display: inline-block;
  width: 60px;
  height: 60px !important;
  margin-right: 5px;
  margin-left: 30%;
  line-height: 60px !important;
  border-radius: 30px;
  background-color: rgb(64, 158, 255);
  vertical-align: middle;
  text-align: center;
}
</style>